<template>

<div class="member-form">
    
    <!-- 基础信息 -->
    <div class="item">

        <c-form-block-container>
            
            <c-block-header :title='"人员类型"'></c-block-header>
            <div class="personal-container">
                <Row>
                    <Col class='personal-type-item' v-for='item of mods.personalTypeCheck' :key='item.key' :span='item.span'>
                        <c-check-block :disabled='item.disabled' v-model="data[item.key]" :size='item.size' :icon='item.icon' :img='item.img' :title='item.title'></c-check-block>
                    </Col>
                </Row>
            </div>

        </c-form-block-container>
        
    </div>
    
    <!-- 基础信息 -->
    <div class="item">

         <c-form-block-container>

            <c-block-header :title='mods.base.label'></c-block-header>
            <c-common-form :data='data' :mods='mods.base.mods'></c-common-form>

        </c-form-block-container>
        
    </div>

    <!-- 类型表单 -->
    <div class="item" v-for='formItem of mods.personalTypeInfo' :key='formItem.key'>
        <c-form-block-container v-if='data[formItem.showKey]'>

            <c-block-header :title='formItem.label'></c-block-header>
            <c-common-form :data='extensions[formItem.key]' :mods='formItem.mods'></c-common-form>

        </c-form-block-container>
        
    </div>
    
    <!-- 权限 -->
     <div class="item">

        <c-form-block-container>

            <c-block-header :title='"权限配置"'></c-block-header>
            <l-power :mods='mods.power' :data='acl' v-if='!isEmptyObj(acl)'></l-power>

        </c-form-block-container>
        
    </div>
    
    
</div>

</template>

<script lang='ts'> 
import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
import imgs from '@/img_path.json'
const power = () => import('@/components/ivew_components/power/index.vue')
import { isEmptyObj } from '@/utils/tools'


@Component({
    components:{
         'l-power': power,
    }
})
export default class memberForm extends Vue{
    name:string = 'member-form'

    @Prop()
    data

    @Prop()
    mods

    isEmptyObj = isEmptyObj

    // 防止切换表单时，因表单数据不匹配，造成的报错
    get extensions(){
        return this.data.extensions || {}
    }
    
    get acl(){
        return this.data.acl || {}
    }

    

}


</script>

<style scoped lang='scss'>

.item{
    & + &{
        margin-top: _intervals();
    }
}

.personal-container{
    margin-top: _intervals();
}

.personal-type-item{
    text-align: center;
}

</style>